<template>
  <el-dialog :visible.sync="visible" title="编辑工具信息" width="700px">
    <el-form :model="form" label-width="100px" ref="formRef">
      <el-form-item label="工具名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入工具名称"></el-input>
      </el-form-item>
      <el-form-item label="工具类型" prop="frameType">
        <el-input v-model="form.frameType" placeholder="请输入工具类型"></el-input>
      </el-form-item>
      <el-form-item label="工具简介" prop="desc">
        <el-input v-model="form.desc" type="textarea" placeholder="请输入工具简介"></el-input>
      </el-form-item>
      <el-form-item label="工具版本" prop="version">
        <el-input v-model="form.version" placeholder="请输入工具版本"></el-input>
      </el-form-item>
      <el-form-item label="工具说明" prop="useDesc">
        <el-input v-model="form.useDesc" type="textarea" placeholder="请输入工具说明"></el-input>
      </el-form-item>
      <el-form-item label="操作系统" prop="operSystem">
        <el-input v-model="form.operSystem" placeholder="请输入操作系统"></el-input>
      </el-form-item>
      <el-form-item label="安装说明" prop="installDesc">
        <el-input v-model="form.installDesc" type="textarea" placeholder="请输入安装说明"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "toolitem",
  data() {
    return {
      visible: false, // 控制弹出层显示
      form: {}, // 表单数据
    };
  },
  methods: {
    open(row) {
      this.form = { ...row }; // 数据回显
      this.visible = true; // 打开弹出层
    },
    close() {
      this.visible = false; // 关闭弹出层
    },
    submit() {
      
      this.$emit("submit", this.form); // 将更新后的数据传递给父组件
      this.close();
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
